<script setup>
import breadCrumbPage from '@/components/breadCrumbPage.vue'
import { ref } from 'vue'
import { DownOutlined, UpOutlined, PlusOutlined } from '@ant-design/icons-vue'
// import { message } from 'ant-design-vue'

const breadMessage = ['首页', '列表页', '查询表格']
const formState = ref({
  ruleId: '',
  state: undefined,
  count: '',
  date: ''
})

const isShow = ref(true)//是否展示更多输入框
const totalSelect = ref(0)
const totalService = ref(0)

// 表格相关
const columns = [
  {
    title: '#',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '规则编号',
    dataIndex: 'order',
    key: 'order'
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc'
  },
  {
    title: '服务调用次数',
    dataIndex: 'serviceCount',
    key: 'serviceCount',
    sorter: (a, b) => a.serviceCount - b.serviceCount,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state'
  },
  {
    title: '更新时间',
    dataIndex: 'updateDate',
    key: 'updateDate',
    sorter: (a, b) => new Date(a.updateDate).getTime() - new Date(b.updateDate).getTime(),//转换为时间戳再计算
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  },
]
let fakeData = 1//用来定义假数据的
const data = [
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 925,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 155,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 110,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 985,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 211,
    state: '异常',
    updateDate: '2002-05-09 13:10:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:10:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:30:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:43:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-4-09 13:12:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2302-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:10:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:23:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 925,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 155,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 110,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 985,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 211,
    state: '异常',
    updateDate: '2002-05-09 13:10:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:10:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:30:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:43:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-4-09 13:12:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2302-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2002-05-09 13:10:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2002-06-09 13:23:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '运行中',
    updateDate: '2402-05-09 13:20:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2002-05-19 13:25:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '已上线',
    updateDate: '2302-05-09 13:27:39',
    action: '配置'
  },
  {
    key: `${fakeData}`,
    id: fakeData,
    order: `No ${fakeData++}`,
    desc: '这是描述数据',
    serviceCount: 955,
    state: '异常',
    updateDate: '2054-05-09 13:80:39',
    action: '配置'
  },
]
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    totalSelect.value = selectedRows.length
    totalService.value = selectedRows.reduce((sum, item) => item.serviceCount + sum, 0)
  }
};

// modal对话框
const open = ref(false);
const showModal = () => {
  open.value = true;
};
const handleOk = e => {
  console.log(e);
  open.value = false;
};

// 对话框form
const formDescript = ref({
  desc: ''
})
const descRules = {
  desc: [
    { min: 5, required: true, message: '请输入至少五个字符的规则描述！', trigger: 'blur' }
  ]
}
</script>
<template>
  <div class="searchPage">
    <breadCrumbPage :breadMessage></breadCrumbPage>

    <div class="searchCard">
      <a-card :bordered="false" style="width: 100%;">
        <div class="top">
          <a-form action="#" :model="formState" class="up">
            <!-- 少量信息展示 -->
            <div class="lessMessage" v-if="!isShow">
              <a-form-item label="规则编号：" style="width: 25vw;">
                <a-input v-model:value="formState.ruleId" />
              </a-form-item>
              <a-form-item label="使用状态" style="width: 25vw;">
                <a-select ref="select" v-model:value="formState.state" placeholder="请选择">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="close">关闭</a-select-option>
                  <a-select-option value="running">运行中</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item style="width: 25vw;">
                <a-button type="primary" style="margin-right: 10px;">查询</a-button>
                <a-button>重置</a-button>
                <a-button type="link" @click="isShow = true">
                  展开
                  <DownOutlined />
                </a-button>
              </a-form-item>
            </div>

            <!-- 大量信息展示 -->
            <div class="moreMessage" v-else>
              <a-form-item label="规则编号：" style="width: 25vw;">
                <a-input v-model:value="formState.ruleId" />
              </a-form-item>
              <a-form-item label="使用状态" style="width: 25vw;">
                <a-select ref="select" v-model:value="formState.state" placeholder="请选择">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="close">关闭</a-select-option>
                  <a-select-option value="running">运行中</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="调用次数：" style="width: 25vw;">
                <a-input v-model:value="formState.count" />
              </a-form-item>
              <a-form-item label="更新日期：" style="width: 25vw;">
                <a-date-picker v-model:value="formState.date" style="width: 100%;" />
              </a-form-item>

              <a-form-item label="使用状态" style="width: 25vw;">
                <a-select ref="select" v-model:value="formState.state" placeholder="请选择">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="close">关闭</a-select-option>
                  <a-select-option value="running">运行中</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="使用状态" style="width: 25vw;">
                <a-select ref="select" v-model:value="formState.state" placeholder="请选择">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="close">关闭</a-select-option>
                  <a-select-option value="running">运行中</a-select-option>
                </a-select>
              </a-form-item>
              <div style="display: flex;justify-content: end;width: 100%;">
                <a-form-item>
                  <a-button type="primary" style="margin-right: 10px;">查询</a-button>
                  <a-button>重置</a-button>
                  <a-button type="link" @click="isShow = false">
                    收起
                    <UpOutlined />
                  </a-button>
                </a-form-item>
              </div>
            </div>
          </a-form>
          <div class="down">

            <a-button type="primary" style="margin-bottom: 18px;" @click="showModal">
              <PlusOutlined />
              新建
            </a-button>

            <a-modal v-model:open="open" title="新建规则" @ok="handleOk">
              <a-divider />
              <a-form :model="formDescript" :rules="descRules">
                <a-form-item label="描述" name="desc">
                  <a-input v-model:value="formDescript.desc" />
                </a-form-item>
              </a-form>
              <a-divider />
            </a-modal>

            <a-alert type="info" show-icon>
              <template #description>
                <span style="margin-right: 16px;">已选择: {{ totalSelect }}</span>
                <span>服务调用次数总计 {{ totalService }} 次</span>
              </template>
            </a-alert>
          </div>
        </div>

        <!-- 表格 -->
        <div class="bottom">
          <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'state'">
                <a-badge :status="text === '运行中' ? 'processing' : (text === '已上线' ? 'success' : 'error')" />
                <span>{{ text }}</span>
              </template>
              <template v-if="column.dataIndex === 'action'">
                <span>
                  <a>配置</a>
                  <a-divider type="vertical" />
                  <a>订阅报警</a>
                </span>
              </template>
            </template>
          </a-table>
        </div>

      </a-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
.searchPage {

  .searchCard {
    background: #ececec;
    padding: 16px 20px;

    .lessMessage {
      display: flex;
      justify-content: space-between;
    }

    .moreMessage {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
    }

    .top {
      margin-bottom: 18px;

      // .down {}
    }
  }
}
</style>
